<#setting classic_compatible=true>
<#assign base=request.contextPath />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="../images/favicon.ico" type="image/ico" />

    <title>主题队列管理</title>

    <!-- 引入通用css和js -->
	<#include "/common/commoncss.ftl">
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/bootstrap-select.min.css">
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/bootstrap-table.min.css">
	<!-- ztree -->
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/ztree/zTreeStyle/zTreeStyle.css" >
	<!-- 配置样式 -->
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/queue/config-modal.css" >
	<!-- table 样式 -->
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/queue/queue.css" >
	<!-- 按钮 -->
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/common/common-btn.css" >
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/model.css" > 
		
	
	<style type="text/css">
		/* icon样式 */
		.iconStyle {
			width: 16px;
			height: 16px;
		}
		a:hover {
			font-weight: bold;
		}
		/* 标题 */
		#queueTitle {
		    color: #73879C;
		    font-weight: 700;
		    font-size: 14px;
		    margin-left: 20px;
		}
		/* 栅格系统 4 */
		.query-input {
			width: 370px;
			padding-left: 0px;
			padding-right: 0px;
		}
		.query-input label {
		    width: 85px;
		}
		li {
		    list-style: none;
		}
        /* 间距 */
        .form-group label {
        	padding: 0;
        }
       /*  #formSearch .form-group select {
        	width: 227px;
        } */
        .pull-left {
			 float: right!important;
		}
		/* 查看配置部分 */
		#configInfo div {
			padding-top: 0;
		}
		
		/* 树阴影 */
		.button {
		    box-shadow: none;
		}
		/* table高 */
		/* .fixed-table-body {
			max-height: 290px;
		} */
		.fixed-table-body {
		    height: auto;
		}
		  /* 树的滚动条和高度 */
		ul.ztree{
			overflow-y: hidden !important;
		  	height:auto !important;
		  	width:100% !important;
		  	margin-top: 0px;
		  	background:#f7f7f7 !important;
		  	border:0;
		}
		 /* 表头样式*/
		.th-inner {
			font-size: 14px !important;
		}
		
		#tool{
			float: right;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		#tool button{
			border-radius: 4px;
			margin-left: 10px;
			color: white;
			border: 0px;
		}
		#btn_query{
			border: 0px;
		}
    </style>
  </head>

<body class="nav-md">
  	


<!-- 查看配置 -->
<div class="modal fade" id="checkConfigInfo" tabindex="-1" role="dialog">
    <div class="modal-dialog" style="width:500px;" role="document">
    <div class="modal-content" style="min-width: 520px;">
        <!-- 标题 -->
        <div class="modal-header" style="padding-left: 16px; background: #F2F2F2;height: 40px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="width: 12px;color: #666666;">
            	<span aria-hidden="true">&times;</span>
            </button>
            
            <h4 class="modal-title" id="myModalLabel">查看配置</h4>
        </div>
		
		
        <!-- 内容 -->
        <div class="modal-body"style="width: 100%;">
            <form  id="configInfo" >
                <div class="form-group">
                    <div>
                    	<span >主题队列编号：</span>
                        <span class="contentB" id="topicQueueNo"></span>
                    </div>
                    <!-- <div class="infoEx"id="queueNamediv">
                    	<span >队列名称：</span>
                        <span class="contentB" id="queueName"></span>
                    </div> -->
                    <!-- host、端口 只有查看消息队列配置时才能看到 -->
                    <div class="infoEx" id="queueHost" style="display:none;">
                    	<span >消息队列IP：</span>
                        <span class="contentB" id="host">${host!'无'}</span>
                    </div>
                    <div class="infoEx" id="queuePort" style="display:none;">
                    	<span >消息队列端口：</span>
                        <span class="contentB" id="port">${port!'无'}</span>
                    </div>
                	 <div class="infoEx" id="vhostNamediv">
                    	<span >虚拟主机名称：</span>
                        <span class="contentB" id="vhostName"></span>
                    </div>
	               <!--  <div class="infoEx">
	                    <span>密钥使用方式：</span>
	                    <span class="contentB">
	                       	请查看 &nbsp;&nbsp;&nbsp;<a href="http://nexus.dev.js.sgcc.com.cn:8900/nexus/#welcome" target="_blank">maven</a>
	                    </span>
	                </div> -->
                </div>
                
                <div class="app" id="oriAppName">
                	源应用：<span id="appName" style="color: green;"></span>
                </div>
                <div id="oriApp">
	                <!-- <div class="infoEx" id="oriAppName">
	                	<span class="contentA"> 应用名称：</span>
	                    <span class="contentB" id="appName"></span>
	                </div> -->
	                
	                <!-- <div class="infoEx"id="oriUserUserName"style="width: 100%;">
	                	<span class="contentA"> 用户名：</span>
	                    <span class="contentB" id="oriUser"></span>
	                </div>
                
	                <div class="infoEx"id="oriUserPassword">
	                	<span class="contentA">密码：</span>
	                	<span class="contentB" id="oriPass"></span>
	                </div> -->
	                
	                 <!-- <div class="infoEx"id="oriUserExchange">
	                	<span class="contentA">交换机：</span>
	                	<span class="contentB" id="oriExchange"></span>
	                </div>  -->
                </div>
               <!--  <div id="template">
                模板 
                </div> -->
                
                <div id="targetAppList">
                	<!-- 目标应用集合 -->
                </div>
                
            </form>
        </div>
        
    </div>
	</div>
</div>
			<!-- 页面部分 -->
     		<div class="body-content" style="padding-top: 1%;">
	        
			<div>
				<span class="iconfont icon-zhuti"></span><span id="queueTitle" >主题队列管理</span>
			</div>
				
         	<div>
		        <!-- 树形结构-->
		        <div style="width: 14%; float: left;">
	       			<ul id="tree" class="ztree" style="border: none; height: 100%;;background-color:#fff; ">
			         	
		         	</ul>
		        </div>
		        
				<div class="panel panel-default" style="width: 84%;float: right; background-color:#fff;" >
			        
					<!-- 内容 -->
					<div class="panel-body">
				        <!-- 查询加表格 -->
				        	
				        <form id="formSearch" class="form-horizontal" style="margin-bottom: 0;">
				        	<!-- 查询表单 -->
							<div class="form-group" style="white-space:nowrap;margin-bottom: 0;">
				      			<div class="form-group col-sm-4 query-input">
								    <label for="sign" class="col-sm-4 control-label">主题队列编码</label>
								    <div class="col-sm-8">
								    	<!-- 最大32位，前端 onkeyup 去空格 -->
								        <input class="form-control inputbox" maxlength='32' id="sign"
								        placeholder="请输入主题队列编码" style="margin: 0;"onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
			                                  onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
			                                  oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')">
								    </div>
							    </div>
							    
								<div class="form-group col-sm-4 query-input">
								    <label for="name" class="col-sm-4 control-label">主题队列名称</label>
								    <div class="col-sm-8">
								         <input class="form-control inputbox" maxlength='32' id="name" 
								         placeholder="请输入主题队列名称" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
			                                  onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
			                                  oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')">
								    </div>
							 	</div>
							 	
								<div class="form-group col-sm-4 query-input">
								    <label for="type" class="col-sm-4 control-label">接入方式</label>
								    <div class="col-sm-8">
										<select class="form-control inputbox" id="type" style="color: #73879C;width: 100%;">
											<option value="" selected >全部</option>
											<#if accessType?? && (accessType?size > 0)>
												<#list accessType as item>
				                                   	<option value="${item.CODE!}">${item.NAME!}</option>
												</#list>
											</#if>
				                    	</select>
								    </div>
							 	</div>
							 	
								<div class="form-group col-sm-1">
	                            	<button id="btn_query" type="button" class="btn btn-default two-word-btn" style="color:#fff;background: #00796A;">
	                            		<span class="fa fa-search" aria-hidden="true" style="padding-left: 0;padding-right: 0;">&nbsp;查询</span>
	                            	</button>
								</div>
								
							</div>
				        </form>
				        
				        <!-- 按钮 -->
					    <div id="tool" class="btn-group">
		                	<button type="button" class="btn btn-default" data-toggle="dropdown"
		                	style="background: #3B9ED9;width:66px; height:40px;padding-left:0px;padding-right:2px;" aria-haspopup="true" aria-expended="false" >
		                    	<span class="iconfont icon-add iconStyle" aria-hidden="true"></span>&nbsp;新增
		                	</button>
		                    <ul class="dropdown-menu" style="height: 65px;">
		                    	<li style="height: 30px;line-height: 30px;">
		                    		<a href="javascript:void(0);" onclick="saveOrEdit(3)"style="background: #fff;">
					                     <span class="glyphicon glyphicon-plus" aria-hidden="true">服务接入</span>
					                </a>
		                    	</li>
		                    	<li style="height: 30px;line-height: 30px;">
		                    		<a href="javascript:void(0);" onclick="saveOrEdit(1)" style="background: #fff;">
					                     <span class="glyphicon glyphicon-plus" aria-hidden="true">消息队列接入</span>
					                </a>
		                    	</li>
		                    </ul>
			                <button type="button" class="btn btn-default" onclick="saveOrEdit(2)" 
			                	style="background: #7ABD3E;width:66px; height:40px;padding-left:0px;padding-right:2px;">
			                     <span class="iconfont icon-edit-1-copy iconStyle" aria-hidden="true"></span>&nbsp;修改
			                </button>
			                <button type="button" class="btn btn-default" onclick="checkConfig()" 
			                	style="background: #6F7ABA;width:104px; height:40px;padding-left:0px;padding-right:4px;">
			                     <span class="iconfont icon-peizhi iconStyle" aria-hidden="true"></span>&nbsp;查看配置
			                </button>
			                <button type="button" class="btn btn-default" onclick="releaseOrRecall()" 
			                	style="background: #38924D;width:66px; height:40px;padding-left:0px;padding-right:6px;">
			                     <span class="iconfont icon-chehui iconStyle" aria-hidden="true"></span>
			                     <span id="release">发布</span>
			                </button>
			                <button type="button" class="btn btn-default" onclick="deleteByIds()"
			                	style="background: #FFA45A;width:66px; height:40px;padding-left:0px;padding-right:6px;">
			                     <span class="iconfont icon-shanchu iconStyle" aria-hidden="true"></span>&nbsp;删除
			                </button>
			                <!-- <button type="button" class="btn btn-default two-word-btn" onclick="synch()" 
			                	style="background: #3ECDE9;">
			                     <span class="glyphicon glyphicon-refresh iconStyle"></span>&nbsp;同步
			                </button> -->
			                <!-- 查看实时信息方法已写好在js中 -->
			                <!-- <button type="button" class="btn btn-default four-word-btn" onclick="check()" 
			                	style="background: #FF55F3;">
			                     <img class="iconStyle" src="${base}/zhgl-jzstyxx-manage/images/chart.png" >&nbsp;实时信息
			                </button> -->
			        	</div>
			        	
			        	<!-- <table id="queueList" >
						</table> -->
						<!-- 
							data-striped="true" 		隔行变色
							data-classess="table table-hover" 是否显示内容下拉框
							data-showtoggle="true" 		是否显示切换视图按钮
							data-search="true" 			是否显示搜索框
							data-show-refresh="true" 	刷新
							data-toolbar="#toolbar" 	工具栏
							data-height="390" 			设置表格高度(固定表头生效)
						 -->
						<table id="queueList">
						</table>
					</div>
					<!-- 新增拓扑图 -->
<!-- 					<div class="graph">
						<div class="gra  gra-left" id="gra-left"></div>
						<div class="gra  gra-mid">
							<div class="mid-zero"> 
								<span>消息中心</span>
							</div>
						</div>
						<div class="gra  gra-right" id="gra-right"></div>
					</div> -->
					
				</div>
			</div>
		</div>
       	



	
	<#include "/common/commonjs.ftl">
	<!-- ztree -->
   	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/ztree/jquery.ztree.core.js"></script>
   	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/ztree/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/ztree/jquery.ztree.exedit.js"></script>
    <script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/ztree/jquery.ztree.exhide.js"></script>
	<!-- 页面js -->
	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/queue/topicQueue.js"></script>
	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/echarts.js"></script>
	
	<script type="text/javascript">
		
	
		$(document).ready(function(){
			
	    	//应用分类（三集五大）
	        $.ajax({
	        	url:"/zhgl-jzstyxx-manage/application/selectByAppType",
	            type: 'post',
	        	dataType: 'json',
	        	success: function (data) {
	        		    appType=data;  
	        	}
	        });
	    	
	    	//树状图
	    	//后台传入的tree列表
	    	var zTreeNodes;
	    	$.ajax({
	    	 	url :proName + "/application/gettree",
	    	 		type: 'post',
	    	 		dataType:'json',
	    	 		async: false,
	    	 		success:function(data){
	    	 			// console.log("data", data);
	    	 			// zTreeNodes=JSON.parse(data)  
	    	 			zTreeNodes=data
	    	 			
	    	 		}
	    	 	});	

	    	    var zTreeObj,
	    	    setting = {
	    	        view: {
	    	            dblClickExpand: false,
	    	            //是否允许选中多个节点
	    	            selectedMulti: false,
	    	            //是否显示 连接线
	    	            showLine:true
	    	        },
	    			//数据
	    	        data: {
	    	            simpleData: {
	    	                enable: true,
	    	                idKey: "id",
	    	                pIdKey: "pId",
	    	                rootPId: "0"
	    	            }
	    	        },
	    			//是否使用复选框
	    	        check:{
	    			//true / false 分别表示 显示 / 不显示 复选框或单选框
	    	            enable: false,
	    				//chkStyle = "checkbox" 时，显示 checkbox 选择框,chkStyle = "radio" 时，显示 radio 选择框
	    	            chkStyle: "checkbox",
	    				//Y 属性定义 checkbox 被勾选后的情况； 
	    				//N 属性定义 checkbox 取消勾选后的情况； 
	    				//"p" 表示操作会影响父级节点； 
	    				//"s" 表示操作会影响子级节点。
	    				
	    	            chkboxType: { "Y": "ps", "N": "ps" }
	    	        },
	    			//回调函数
	    	        callback: {
	    			//点击时回调
	    	            onClick: zTreeOnClick,
	    	            //onCheck: zTreeOnCheck,
	    				//onRightClick: OnRightClick
	    				
	    	        }
	    	    }
	    	   
	    	$(document).ready(function(){
		    	//初始化树形结构
		    	zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
		    	//zTree = $.fn.zTree.getZTreeObj("tree");
	    	});
			
		});
		var checkAppId = "";
		//点击事件
		function zTreeOnClick(event, treeId, treeNode) {
			//console.log("点击的节点信息: ",treeNode);
			//console.log("应用id: ", treeNode.id);
			checkAppId = treeNode.id;
			$('#queueList').bootstrapTable('refresh');
		};
		//获取index页面设置的全局变量
		$(document).ready(function(){
			var appName=parent.appName;
			
			if(appName!=null&&appName!=undefined&&appName!=""){
				var a=$("#name").val();
				var url=window.location.href;
				if(url!="http://msplatform.local.js.sgcc.com.cn:6001/zhgl-jzstyxx-manage/topicQueue/page"){
					$("#name").attr("value",appName);
					$("#btn_query").trigger("click");
				}
				
			}
		}); 
	</script>
	
	
	
	
  </body>
</html>